<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/dbsrtap.css">
    <script src="./js/detile.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="nav db-drop">
        <div class="nav-select ">
            <a href="#" data-click data-id="select">分类
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 6" width="9" height="4" class="icon-arrow-up">
                    <path fill="#389eac" d="M0 4.9L.92 6 5.5 1.9 10.08 6 11 4.9 5.52 0 0 4.9z"></path>
                </svg>
            </a>
            <a href="#" data-click>筛选
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 6" width="9" height="4" class="icon-arrow-up">
                    <path fill="#389eac" d="M0 4.9L.92 6 5.5 1.9 10.08 6 11 4.9 5.52 0 0 4.9z"></path>
                </svg>
            </a>
        </div>
        <div class="nav-sort">
            <a href="#">热度</a>
            <a href="#">更新时间</a>
            <a href="#">价格从低到高</a>
            <a href="#">价格从高到低</a>
            <a href="#">评分从高到低</a>
        </div>
        <div class="db-drop-down" data-select id="select">
            <ul class="db-drop-menu">
                <li>全部</li>
                <li>小说</li>
                <li>文学</li>
                <li>人文社科</li>
                <li>经济管理</li>
                <li>科技科普</li>
                <li>计算机与互联网</li>
                <li>成功励志</li>
                <li>生活</li>
                <li>少儿</li>
                <li>艺术设计</li>
                <li>漫画绘本</li>
                <li>教育考试</li>
                <li>杂志</li>
            </ul>
            <ul class="db-drop-menu" >
                <li>全部</li>
                <li>经典著作</li>
                <li>心理学</li>
                <li>社会学</li>
                <li>人类学</li>
                <li>历史</li>
                <li>哲学</li>
                <li>文化</li>
                <li>宗教</li>
                <li>政治</li>
                <li>法律</li>
                <li>教育学</li>
                <li>新闻传播</li>
                <li>编辑出版</li>
                <li>考古</li>
                <li>人文地理</li>
                <li>语言文字</li>
                <li>军事</li>
                <li>其他</li>
            </ul>
        </div>
    </div>
</body>

</html>